<script lang="ts" setup>
import {Ref, ref} from "vue";
import DataForm from "@/components/data-form/index.vue";
import {getDeptTree} from "@/api/system/index.js";
import VFormItem from "@/components/data-form/form-item.vue";

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const form = ref<{[key:string]:any}>({
    deptId: null,
    deptName: null,
    parentId: null,
    orderNum: 0,
})
const attribute = ref({
    filterable: true,
    checkStrictly: true,
    'onCurrentChange': (data: any) => {
        form.value.orderNum = (data.children?.slice(-1)[0].order || 0) + 1
    },
})

const onLoadData = (resolve: (data: any[]) => Promise<Ref>) => {
    getDeptTree().then(({code, data}) => {
        code === 200 && resolve(data.rows).then((comRef: any) => comRef.value.remove(form.value.deptId));
    })
}

// 展示弹窗
const open = (options: OpenFormConfig) => {
    dataFormRef.value?.open(options);
};

defineExpose({open})
</script>

<template>
    <data-form ref="dataFormRef" :model="form" description="部门信息">
        <v-form-item v-model="form.deptId" prop="deptId"/>
        <el-row :gutter="5">
            <el-col :span="14">
                <v-form-item v-model="form.deptName" prop="deptId" label="部门名称"/>
            </el-col>
            <el-col :span="10">
                <v-form-item v-model="form.orderNum" prop="orderNum" label="排列序号" el="input-number" :attrs="{min: 0}"/>
            </el-col>
        </el-row>
        <v-form-item v-model="form.parentId" prop="parentId" label="上级部门" el="tree-select" :data="onLoadData" :attrs="attribute"/>
    </data-form>
</template>